<template>
  <tr>
      <td>
          <input type="checkbox">
      </td>
      <td class="status">
          <span>{{market.status}}</span>
      </td>
      <td class="type">
          <span>{{market.type}}</span>
      </td>
      <td class="name">
          <span>{{market.name}}</span>
      </td>
      <td class="photo">
          <span class="photoSpan">
            <span
              v-for="(photo,index) in market.photo" 
              :key="index"
              >
                <img :class="{imgLess:(market.photo.length<=2),imgMore:(market.photo.length<=8&&market.photo.length>2)}" :src="photo">
            </span>
          </span>
      </td>
      <td class="text"> 
          <span :title="market.text">{{market.text}}</span>
      </td>
      <td class="message">
          <span>{{market.message}}</span>
      </td>
      <td class="do">
          <button class="deleteUser">注销</button>
          <button class="audite" v-show="market.status==='未审核'">审核</button>
      </td>
  </tr>
</template>

<script>
export default {
    name: 'MarketadminItem',
    props:['market'],
}
</script>

<style lang="less" scoped>
*{
    box-sizing: border-box;
}
tr{
    background-color: #f9f9f9;
    a{
        color: #337ab7;
    }
    .type,.name,.do,.message{
        width: 7%;
    }
    .photo{
        width: 38%;
    }
    .text{
        width: 20%;
        span{
            width: 180px !important;
            white-space: normal;
            overflow-y: auto;
            height: 100px;
        }
    }
    .type{
        span{
            width: 100px;
        }
    }
    .status{
        width: 80px;
        span{
            width: 80px;
        }
    }
    .name{
        span{
            width: 80px;
        }
    }
}
td{
    padding:4px;
    font-size: 16px;
    vertical-align: middle;
    text-align: center;
    span{
        display: inline-block;
        // width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        text-align: center;
        .imgLess{
            height: 115px;
            margin: 0 3px 0 4px;
            width: 190px;
        }
        .imgMore{
            height: 56px;
            margin: 0 3px;
            width: 90px;
        }
    }
    .photoSpan{
        width: 200px;
        height: 115px;
        border-radius: 10px;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        gap: 5px;
    }
    input{
        text-overflow: ellipsis;
    }
    button{
        border: 1px solid;
        border-radius: 2px;
        margin-right: 5px;
        font-size: 12px;
        padding: 4px 10px;
        cursor: pointer;
    }
    .deleteUser{
        color: #ff9292;
        background-color: #ffeded;
        border-color: #ffdbdb;
        margin-bottom: 5px;
    }
    .audite{
        color: #ffba00;
        background: #fff8e6;
        border-color: #ffe399;
    }
}
</style>